<!-- @format -->

<template>
  <main class="main">
    <el-row :gutter="20">
      <el-col :sm="24" :md="24" :lg="7">
        <div class="grid-content">
          <!-- 个人中心 -->
          <PersonalCenter />
        </div>
      </el-col>
      <el-col :sm="24" :md="24" :lg="17">
        <div class="grid-content">
          <!-- 常用功能 -->
	        <SquareModule v-bind="commonProps" type="round"/>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :sm="24" :md="24" :lg="7">
        <div class="grid-content">
          <!-- 待办事项 -->
          <NoticeList v-bind="noticeListProps" />
        </div>
      </el-col>
      <el-col :sm="24" :md="24" :lg="17">
        <div class="grid-content">
          <!-- 项目管理 -->
          <SquareModule v-bind="projectProps" type="square"/>
        </div>
      </el-col>
    </el-row>
  </main>
</template>

<script setup name="Index">
// 个人中心
import PersonalCenter from "@/views/indexModule/PersonalCenter";
// 待办事项
import NoticeList from "@/views/indexModule/NoticeList";
// 方形模块
import SquareModule from "@/views/indexModule/SquareModule";
import usePermissionStore from "@/store/modules/permission";
import commonIcon from "@/assets/icons/index/common.png";
import configurationIcon from "@/assets/icons/index/configuration.png";
import {listNotice} from "@/api/sys/notice.js";

const permissionStore = usePermissionStore();

// 常用功能
const commonProps = ref({
  title: "常用功能",
  icon: commonIcon,
  iconStyle: {
    height: "21px",
  },
  showItemList: [
    {
      name: "用户管理",
      goToUrl: "/um/umClientUser",
      icon: configurationIcon,
    },
  ],
});

const projectProps = ref({
  title: "系统管理",
  icon: commonIcon,
  backgroundColor: "bule",
  iconStyle: {
    height: "21px",
  },
  showItemList: [
	  {
		  name: "系统用户",
		  goToUrl: "/sys/user",
		  icon: configurationIcon,
	  },
    {
      name: "角色权限",
      goToUrl: "/sys/role",
      icon: configurationIcon,
    },
  ],
});


const noticeListProps = ref({
  moreLink: "/sys/notice",
  noticeList: [],
  total: 0,
});

listNotice().then((res) => {
	noticeListProps.value.noticeList = res.rows;
	noticeListProps.value.total = res.total;
});

</script>

<style scoped lang="scss">
.main {
  height: calc(100vh - 50px);
  overflow: scroll;
  padding: 32px;
  padding-top: 20px;
  background: #f3f5fa;
  padding-bottom: 0;
}
.grid-content {
  margin-bottom: 20px;
}
</style>
